<template>

  <div style="width:1200px; margin:0 auto">
    <Header></Header>

    <div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
<!--        <el-table-column-->
<!--          type="selection"-->
<!--          width="55">-->
<!--        </el-table-column>-->
        <el-table-column
          label="商品信息">
          <template slot-scope="scope">
          <span>
            <img class="lazy" :src="scope.row.picture" width="80px" height="100px">
          </span>
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单价(元)" width="120">
          <template slot-scope="scope">
            {{ (scope.row.price * 0.01).toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column label="数量" width="150">
          <template slot-scope="scope">
            <el-input-number size="mini" v-model="scope.row.number" :min="1" :max="99" @change="handleChange"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="金额(元)" width="120">
          <template slot-scope="scope">
            {{ (scope.row.price * scope.row.number * 0.01).toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center">
        <span>已选择<span style="color: red;font-size: large">{{ totalNum }}</span>件商品</span>
          <span>总价: <span style="color: red;font-size: large">{{(totalPrice * 0.01).toFixed(2) }} </span>元</span>
        <el-button type="danger" @click="showOrder">去结算</el-button>
      </div>
    </div>

    <Footer></Footer>

  </div>

</template>

<script>
  import Footer from '@/components/Footer'
  import Header from '@/components/Header'

  export default {
    components: {
      Footer,
      Header
    },
    data() {
      return {
        multipleSelection: []
      }
    },
    computed: {
      totalNum: function() {
        var total = 0
        for (var i = 0; i < this.tableData.length; i++) {
          var item = this.tableData[i]
          total += item.number
        }
        return total
      },
      totalPrice: function() {
        var total = 0
        for (var i = 0; i < this.tableData.length; i++) {
          var item = this.tableData[i]
          total += item.number * item.price
        }
        return total
      },
      tableData() {
        return this.$store.state.cart.shopCart
      }
    },

    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row)
          })
        } else {
          this.$refs.multipleTable.clearSelection()
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      showOrder() {
        if (this.totalNum === 0) {
          this.$message({
            message: '购物车不能为空，请先添加商品',
            type: 'warning'
          })
          return
        }
        this.$router.push('/front/order')
      },
      handleDelete(index, row) {
        this.$store.commit('deleteCart', row.id)
        this.$message({
          message: '删除成功',
          type: 'success'
        })
      }
    }
  }
</script>

<style scoped>

</style>
